import { Label } from "@renderer/components/ui/base/field";
import { Tooltip } from "@renderer/components/ui/base/tooltip";
import { CircleQuestionMark } from "lucide-react";

interface LabelWithTipsProps {
  label: string;
  tips: string;
  tooltipPlacement?: "top" | "bottom" | "left" | "right";
  tooltipDelay?: number;
  showArrow?: boolean;
}

export function LabelWithTips({
  label,
  tips,
  tooltipPlacement,
  tooltipDelay = 100,
  showArrow = false,
}: LabelWithTipsProps) {
  return (
    <div className="flex flex-row items-center gap-x-1" data-slot="label">
      <Label className="text-label-fg">{label}</Label>

      <Tooltip delay={tooltipDelay}>
        <Tooltip.Trigger>
          <CircleQuestionMark className="h-3 w-3 text-label-fg" />
        </Tooltip.Trigger>

        <Tooltip.Content
          placement={tooltipPlacement}
          showArrow={showArrow}
          intent="default"
        >
          <div className="max-w-[300px]">{tips}</div>
        </Tooltip.Content>
      </Tooltip>
    </div>
  );
}
